<template>
  <div class="form-item project-name">
    <div class="form-item">
      <p class="form-item__label title">项目名称：</p>
      <p class="form-item__value">{{ data.projectName }}</p>
    </div>
    <div class="icon-reward">
      <svg-icon name="gold" />
    </div>
  </div>
  <p class="title">项目详情</p>
  <div class="detail">
    <p>
      该项目获得平台{{ data.level }}认证<a-button
        type="primary"
        @click="handleReportClick"
        >最终审查报告</a-button
      >
    </p>
    <a-divider dashed />
    <p>
      您的项目现有资格开始重新认证过程
      <a-button v-if="!readOnly" type="primary" @click="handleReCertification"
        >重新认证</a-button
      >
    </p>
  </div>
  <p class="title">
    项目信息
    <a-button type="link" class="modify-button" @click="handleInfoModifyClick"
      >查看</a-button
    >
  </p>

  <div class="form-item table" v-for="(item, index) in columns" :key="index">
    <p class="form-item__label">{{ item.title }}：</p>
    <p class="form-item__value">{{ data[item.dataIndex] }}</p>
  </div>
</template>
<script lang="ts" setup>
import { getProjectDetail } from "@/api";
import dayjs from "dayjs";
import { getCurrentInstance, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps<{ readOnly: boolean; routeNamePrefix: string }>();
const columns = [
  {
    title: "项目类型",
    dataIndex: "projectType",
  },
  {
    title: "项目名称",
    dataIndex: "projectName",
  },
  // {
  //   title: "指标库版本",
  //   dataIndex: "indicatorName",
  // },
  {
    title: "结束日期",
    dataIndex: "endDate",
    customRender: ({ text }: any) => dayjs(text).format("YYYY-MM-DD"),
  },
  {
    title: "建筑面积",
    dataIndex: "constructArea",
  },
  {
    title: "产权归属",
    dataIndex: "propertyOwnership",
  },
  {
    title: "产权方代表",
    dataIndex: "propertyOwner",
  },
  {
    title: "产权方类型",
    dataIndex: "propertyOwnerType",
  },
  {
    title: "产权方所在地区",
    dataIndex: "propertyOwnerLocation",
  },
  {
    title: "电子邮件",
    dataIndex: "propertyOwnerEmail",
  },
  {
    title: "项目所在国家/地区",
    dataIndex: "province",
  },
  {
    title: "项目所在市/县/区",
    dataIndex: "city",
  },
  {
    title: "项目所在街道",
    dataIndex: "street",
  },
  {
    title: "项目所在地址",
    dataIndex: "location",
  },
  {
    title: "邮政编码",
    dataIndex: "postalCode",
  },
];
const data = ref<Record<string, any>>({});
const route = useRoute();
const router = useRouter();
const { $loading } =
  getCurrentInstance()?.appContext?.config.globalProperties || {};
if (route.params.id) {
  $loading?.start();
  getProjectDetail(route.params.id as string)
    .then((res) => {
      data.value = res;
      if (res.status !== +route.params.status) {
        router.replace({
          name: route.name || "",
          params: {
            ...route.params,
            status: res.status,
          },
        });
      }
    })
    .catch(console.error)
    .finally(() => {
      $loading?.stop();
    });
}
const handleReportClick = () => {
  router.push({
    name: props.routeNamePrefix + "ProjectApproval",
    params: route.params,
  });
};
const handleReCertification = () => {};
const handleInfoModifyClick = () => {
  router.push({
    name: props.routeNamePrefix + "ProjectBasicInfo",
    params: route.params,
  });
};
</script>
<style lang="scss" scoped>
.detail {
  border: 1px solid rgb(215, 215, 215);
  padding: 24px;
  margin: 16px 0;
  & > p > button {
    float: right;
  }
}
.title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}
.modify-button {
  float: right;
}
.table {
  // border: 1px solid #000000d9;
  // border-bottom: none;
  // &:last-of-type {
  //   border-bottom: 1px solid #000000d9;
  // }
  &.form-item {
    margin: 0;
  }
  .form-item__label {
    font-weight: 600;
    width: 150px;
    // text-align: center;
  }
}
.form-item.project-name {
  align-items: center;
  justify-content: space-between;
  .form-item,
  .form-item__label {
    margin: 0;
  }
}
.icon-reward {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgb(255, 200, 113);
  & > * {
    width: 40px;
    height: 40px;
    margin: 15px;
  }
}
</style>
